<template>
  <div>
    <a-modal :visible="visible" :bodyStyle="{
      padding: '5px 30px',
    }" :width="1002" @cancel="cancelClick" destroyOnClose>
      <template #title>
        <a-row align="middle" :gutter="[10, 16]">
          <a-col style="font-size: 18px"> 选择添加账号的平台 </a-col>
        </a-row>
      </template>
      <div class="modal-content mt-20">
        <div class="app-item" v-for="item in dataList" :key="item.key" @click="onAddAccount(item.key)">
          <div class="app-item-img">
            <img :src="item.image" class="app-img" />
          </div>
          <div class="app-item-txt">{{ item.value }}</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { InfoCircleFilled, CheckCircleFilled } from "@ant-design/icons-vue";

export default defineComponent({
  name: "AuthorizationModal",
  components: { InfoCircleFilled, CheckCircleFilled },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array,
      default: [],
    },
  },
  setup(props, { emit }) {
    const { dataList } = props;
    const state = reactive({
      count: 0,
    });

    const cancelClick = () => {
      emit("onCancel");
    };

    const confirmClick = () => {
      emit("onConfirm");
    };

    return {
      ...toRefs(state),
      cancelClick,
      confirmClick,
    };
  },
});
</script>

<style lang="less" scoped>
.modal-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .app-item {
    cursor: pointer;
  }

  .app-item-img {
    display: flex;
    width: 50px;
    height: 50px;
  }

  .app-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
  }

  .app-item-txt {
    display: flex;
    justify-content: center;
    line-height: 40px;
  }
}

.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}

.title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
</style>
